<template>
	<view>

		<view class="userInfo">
			<view class="userHead">
				<image :src="list.icon" mode=""></image>
				<!-- <view class="noLogHead"></view> -->
			</view>
			<view class="userContent">
				<view class="userName">
					{{list.nickname}}
				</view>
				
				<view class="userId">
					用户名:{{list.username}}
				</view>
			</view>
		</view>
		
		
		<!-- 我的订单 -->
		<view class="order">
			<view class="orderInner">
				<view class="orderName">
					我的订单
				</view>
				
				<view class="orderInfo">
					<view class="orderCard" v-for="item in orderList" :key="item.index" @click="goOrders(item.index)">
						<image :src="item.icon" mode=""></image>
						<view class="orderInfoName">{{item.name}}</view>
					</view>
				</view>
			</view>
			
		</view>
		
		
		
		<!-- 相关功能 -->
		<view class="aboutFun">
			<view class="funCard" v-for="item in funList" :key="item.index" @tap="goFunction(item.index)">
				<image :src="item.icon" mode=""></image>
				<view class="funName">{{item.name}}</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	import {getMemberInfo} from "@/api/user/index.js"
	export default {
		data() {
			return {
				val:"",
				list:[],
				orderList:[
					{
						name:"待付款",
						index:0,
						icon:"../../static/icons/icon-pay.png"
					},
					{
						name:"已付款",
						index:1,
						icon:"../../static/icons/pay-done.png"
					},
					{
						name:"已发货",
						index:2,
						icon:"../../static/icons/icon-car.png"
					},
					{
						name:"已收货",
						index:3,
						icon:"../../static/icons/icon-done.png"
					},
					{
						name:"售后",
						index:4,
						icon:"../../static/icons/icon-back.png"
					}
				],
				funList:[
					{
						name:"商品收藏",
						index:0,
						icon:"../../static/icons/save.png"
					},
					{
						name:"品牌",
						index:1,
						icon:"../../static/icons/brand.png"
					},
					{
						name:"文章收藏",
						index:2,
						icon:"../../static/icons/article.png"
					},
					{
						name:"地址",
						index:3,
						icon:"../../static/icons/address.png"
					},
					{
						name:"卡包",
						index:4,
						icon:"../../static/icons/card.png"
					},
					{
						name:"购物车",
						index:5,
						icon:"../../static/icons/cart2.png"
					},
					{
						name:"联系客服",
						index:6,
						icon:"../../static/icons/tel.png"
					},
				]
			};
		},
		onShow(){
			this.val = uni.getStorageSync("token")
			if(this.val){
				getMemberInfo({
					token:this.val
				}).then(res=>{
					console.log(res)
					this.list=res.data.userInfo
				})
			}else{
				uni.showModal({
					title:"登录提示",
					content:"暂未登录,是否跳转到登录页面",
					success(res){
						if(res.confirm){
							uni.navigateTo({
								url:"/pages/user/login/login"
							})
						}else{
							uni.showToast({
								title:"您取消了"
							})
						}
					}
				})
			}
		},
		methods:{
			gologin(){
				uni.navigateTo({
					url:"login/login"
				})
			},
			goFunction(val){
				if(val==3){
					uni.navigateTo({
						url:"./address/address"
					})
				}else if(val==5){
					uni.navigateTo({
						url:"./cart/cart"
					})
				}else if(val==0){
					uni.navigateTo({
						url:"./collect/collect"
					})
				}
			},
			goOrders(val){
				uni.navigateTo({
					url:`./orders/orders?index=${val}`
				})
			}
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #F1ECE7;
	}
</style>


<style lang="scss" scoped>
	// 用户个人信息
	.userInfo{
		display: flex;
		padding: 0 20px;
		padding-top: 30px;
		.userHead{
			
			image{
				width: 75px;
				height: 75px;
				border-radius: 50%;
			}
		}
		.userContent{
			margin-left: 16px;
			.userName{
				font-size: 20px;
				font-weight: 600;
			}
			.userId{
				font-size: 13px;
				color: #999;
				padding-top: 10px;
			}
		}
	}
	//我的订单相关
	.order{
		width: 335px;
		height: 104px;
		margin: 0 auto;
		margin-top: 30px;
		background-color: #ffffff;
		.orderInner{
			.orderName{
				height: 38px;
				font-size: 13px;
				line-height: 38px;
				border-bottom: 1px solid #ddd;
				box-sizing: border-box;
				margin: 0 27px;
			}
			.orderInfo{
				
				margin: 0 27px;
				margin-top: 10px;
				display: flex;
				justify-content: space-between;
				.orderCard{
					text-align: center;
					image{
						width: 20px;
						height: 20px;
					}
					.orderInfoName{
						font-size: 13px;
					}
				}
			}
		}
	}
	//相关功能
	.aboutFun{
		width: 335px;
		height: 300px;
		margin: 0 auto;
		margin-top: 30px;
		padding: 15px 0 30px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		text-align: center;
		background-color: #ffffff;
		.funCard{
			width: 33%;
			height: 100px;
			flex-shrink: 0;
			image{
				width: 25px;
				height: 25px;
				margin: 15px 13.5px;
			}
			.funName{
				font-size: 13px;
			}
		}
	}
</style>
